<template>
    <!-- 服务项目 -->
    <div class="object">
        <!-- banner图片 -->
        <div class="banner">
            <el-carousel height="475px">
                <el-carousel-item v-for="item in aboutUsList" :key="item.id">
                    <img :src="$staticPath + item.imageAddress" alt="">
                </el-carousel-item>
            </el-carousel>

            <div class="text">
                <div class="list">
                    <div v-for="item in developmentDirection" :key="item.id">
                        <img :src="$staticPath + item.productImageAddress" alt="">
                        {{ item.productTitle }}
                    </div>
                </div>

                <div v-if="desc.key" class="title">
                    <p v-html="desc.key.productDescribe || desc[0].productDescribe"></p>
                </div>
            </div>
        </div>

        <!-- 子元素： -->
        <div class="line-1">
            <!-- 第一张图 -->
            <div :class="{ 'bg-phone': getIsPhont }">
                <img :src="$staticPath + big.key.productImageAddress || big[0].productImageAddress" alt="">
            </div>
            <!-- 第二张图 -->
            <div :class="{ 'asda-phone': getIsPhont }" class="asda">
                <div v-for="(item, index) in innovateData" :key="item.id" class="asds-item">
                    <div v-if="index == 0" class="img-item">
                        <img :src="$staticPath + item.productImageAddress" alt="">
                    </div>
                    <div class="content-item" :class="{ 'dark': index == 1 }">
                        <div class="desc">
                            <div class="top">
                                <div class="main">{{ item.productTitle }}</div>
                                <div class="con">{{ item.productShortTitle }}</div>
                            </div>
                            <div class="bottom" v-html="item.productDescribe"></div>
                        </div>
                    </div>
                    <div v-if="index == 1" class="img-item">
                        <img src="@/assets/image/service/200242.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div v-for="(item, index) in data" :key="item.id" :class="{ 'line-phone': getIsPhont }" class="line-1">
            <div v-if="!getIsPhont && (index + 1) % 2 == 0" class="img-box">
                <img :src="$staticPath + item.productImageAddress" alt="">
            </div>
            <div :class="{ 'description-phone': getIsPhont }" class="description">
                <div class="description-title">
                    <div class="title">{{ item.productTitle }}</div>
                    <div class="eng">{{ item.productShortTitle }}</div>
                </div>
                <div class="content" v-html="item.productDescribe"></div>
            </div>
            <div v-if="getIsPhont || (index + 1) % 2 != 0" class="img-box">
                <img :src="$staticPath + item.productImageAddress" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'About',
    data() {
        return {
            aboutUsList: [],        //轮播图列表
            data: [],  //团队文化 + 服务商 + 公司目标数据
            innovateData: [],  //科技创新数据
            developmentDirection: [],      //开发方向数据
            desc: {},    //简介(轮播图上方)
            big: {},       //科技创新(左边大图)
            classIdList: ['1827870383694139393', '1827879404404723713', '1827874918579818497', '1827894586556272642', '1827897615045087234'],   //分类id列表
        }
    },
    created() {
        this.queryImage()
        this.getData()
    },
    methods: {

        //获取图片
        queryImage() {
            this.request('queryImage', {}, {
                pageNo: 1,
                pageSize: 6,
                classificationId: '1824999760280072194'
            }).then(res => {
                this.aboutUsList = res
            })
        },


        //查询配置
        queryProgram(classificationId, index) {
            let dateNameList = ['data', 'innovateData', 'developmentDirection', 'desc', 'big']
            this.request('queryProgram', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId
            }).then(res => {
                if (res.length == 1) {
                    return this[dateNameList[index]] = { key: res[0] }
                }
                this[dateNameList[index]] = res
            })
        },

        //获取数据
        getData() {
            this.classIdList.forEach((item, index) => {
                this.queryProgram(item, index)
            })
        }
    },
    computed: {
        ...mapGetters(["getIsPhont"]),
    }
};
</script>

<style lang="scss" scoped>
.object {
    .banner {
        position: relative;
        overflow: hidden;
        height: 31vw;
        width: 100%;

        img {
            width: 100%;
        }

        &::v-deep .el-carousel__arrow--left,
        &::v-deep .el-carousel__arrow--right {
            display: none;
            width: 0;
            height: 0;
        }

        .text {
            position: absolute;
            top: 60px;
            left: 0;
            width: 100%;
            height: 21vw;
            z-index: 999;

            .list {
                display: flex;
                background: #00000055;

                &>div {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    height: 120px;
                    color: white;

                    img {
                        width: 10%;
                    }
                }
            }

            .title {
                display: flex;
                font-size: 30px;
                justify-content: center;
                margin: 80px;
                color: white;

                p {
                    margin-right: 20px;
                }
            }
        }
    }

    .line-1 {
        display: flex;
        flex-wrap: wrap;

        &>div {
            width: 50%;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .asda {

            .asds-item {
                display: flex;
                flex-wrap: wrap;

                .img-item,
                .content-item {
                    width: 50%;
                    background: white;
                }

                .content-item {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;

                    .desc {

                        .top {
                            display: flex;
                            align-items: center;

                            .main {
                                position: relative;
                                font-size: 1.3vw;
                                height: 2vw;

                                &::before {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    width: 50%;
                                    height: 1px;
                                    background: black;
                                }
                            }

                            .con {
                                color: #9F9F9F;
                                font-size: .8vw;
                                margin-left: .5vw;
                            }
                        }

                        .bottom {
                            color: #9F9F9F;
                            font-size: .8vw;
                            margin-top: .5vw;
                        }
                    }
                }

                .dark {
                    background: #434343;
                    color: #fff;

                    .main {
                        &::before {
                            background: white !important;
                        }
                    }
                }

                .light {
                    color: white;

                    .main {
                        &::before {
                            background: white !important;
                        }
                    }

                    .bottom {
                        color: white;
                    }
                }
            }

        }

        //移动端样式
        .bg-phone {
            width: 100%;
        }

        .asda-phone {
            width: 100%;

            .content-item {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                .desc {
                    .top {
                        .main {
                            font-size: 4vw;
                            height: 5vw;
                        }

                        .con {
                            color: #9F9F9F;
                            font-size: 2.5vw;
                            margin-left: .5vw;
                        }
                    }

                    .bottom {
                        font-size: 1.5vw;
                        margin-top: .8vw;
                    }
                }
            }
        }
    }

    .vorte {
        display: flex;

        &>div {
            flex: 1;
            box-sizing: border-box;
            padding: 20px;
        }

        .city {}
    }

    .line-1 {
        .description {
            box-sizing: border-box;
            padding: 5vw 2vw 0vw 2vw;

            .description-title {
                position: relative;
                display: flex;
                align-items: center;

                .title {
                    font-size: 1.5vw;
                }

                .eng {
                    font-size: 1vw;
                    color: #A1A1A1;
                    margin-left: .8vw;
                }

                &::before {
                    position: absolute;
                    bottom: -.3vw;
                    content: '';
                    width: 1.5vw;
                    height: 1px;
                    background: black;
                }
            }

            .content {
                padding: 2vw;
                color: #6F6F6F;
                font-size: 1vw;
            }
        }
    }

    //移动端
    .line-phone {
        .description {
            width: 100% !important;

            .description-title {
                .title {
                    font-size: 6vw;
                }

                .eng {
                    font-size: 4vw;
                }

                &::before {
                    width: 6vw;
                }
            }

            .content {
                padding: 2vw 0;
                font-size: 4vw;
            }

        }

        .img-box {
            width: 100vw !important;

            img {
                width: 100%;
            }
        }
    }
}
</style>